<template>
	<view>
		<page-head title="websocket通讯示例"></page-head>
		<view class="uni-padding-wrap">
			<view class="uni-btn-v">
				<text class="websocket-msg">{{ showMsg }}</text>
				<button class="uni-btn-v" type="primary" @click="connect">
					连接websocket服务
				</button>
				<button class="uni-btn-v" v-show="connected" type="primary" @click="send">
					发送一条消息
				</button>
				<button class="uni-btn-v" type="primary" @click="close">
					断开websocket服务
				</button>
				<button class="uni-btn-v" type="primary" @click="article">
					article
				</button>
				<button class="uni-btn-v" type="primary" @click="chat">
					chat
				</button>
				<NiuDan></NiuDan>
				<text class="websocket-tips">发送消息后会收到一条服务器返回的消息（与发送的消息内容一致）</text>
			</view>
		</view>
	</view>
</template>

<script lang="uts">
	import NiuDan from '../../components/niudan/niudan.vue'
	export default {
		components:{NiuDan},
		data() {
			return {
				connected: false,
				connecting: false,
				msg: '',
				roomId: '',
				platform: '',
			}
		},
		computed: {
			showMsg() {
				if (this.connected) {
					if (this.msg.length > 0) {
						return '收到消息：' + this.msg
					} else {
						return '等待接收消息'
					}
				} else {
					return '尚未连接'
				}
			},
		},
		onLoad() {
			this.platform = uni.getSystemInfoSync().platform
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			menuButtonInfo.top = 0
			menuButtonInfo.width = 0
			menuButtonInfo.height = 0
			console.log('menuButtonInfo', menuButtonInfo)
		},
		onUnload() {
			uni.closeSocket({
				code: 1000,
				reason: 'close reason from client',
				success: (res) => {
					console.log('uni.closeSocket success', res)
				},
				fail: (err) => {
					console.log('uni.closeSocket fail', err)
				},
			})
			uni.hideLoading()
		},
		methods: {
			article() {
				uni.navigateTo({
					url: '/pages/blog/blog?blogId=' + 71
				})
			},
			chat() {
				uni.navigateTo({
					url: '/pages/chat/chat?blogId=' + 71
				})
			},
			connect() {
				if (this.connected || this.connecting) {
					uni.showModal({
						content: '正在连接或者已经连接，请勿重复连接',
						showCancel: false,
					})
					return
				}
				this.connecting = true
				uni.showLoading({
					title: '连接中...',
				})
				uni.connectSocket({
					url: 'ws://192.168.1.30:9001/websocket',
					success: (res) => {
						// 这里是接口调用成功的回调，不是连接成功的回调，请注意
						console.log('uni.connectSocket success', res)
					},
					fail: (err) => {
						// 这里是接口调用失败的回调，不是连接失败的回调，请注意
						console.log('uni.connectSocket fail', err)
					},
				})
				uni.onSocketOpen((res) => {
					this.connecting = false
					this.connected = true
					uni.hideLoading()

					uni.showToast({
						icon: 'none',
						title: '连接成功',
					})
					console.log('onOpen', res)
				})
				uni.onSocketError((err) => {
					this.connecting = false
					this.connected = false
					uni.hideLoading()

					uni.showModal({
						content: '连接失败，可能是websocket服务不可用，请稍后再试',
						showCancel: false,
					})
					console.log('onError', err)
				})
				uni.onSocketMessage((res) => {
					this.msg = res.data
					console.log('onMessage', res)
				})
				uni.onSocketClose((res) => {
					this.connected = false
					this.msg = ''
					console.log('onClose', res)
				})
			},
			send() {
				uni.sendSocketMessage({
					data: 'hello word',
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					},
				})
			},
			close() {
				uni.closeSocket({
					code: 1000,
					reason: 'close reason from client',
					success: (res) => {
						console.log('uni.closeSocket success', res)
					},
					fail: (err) => {
						console.log('uni.closeSocket fail', err)
					},
				})
			},
		},
	}
</script>

<style>
	.uni-btn-v {
		padding: 10rpx 0;
	}

	.uni-btn-v {
		margin: 20rpx 0;
	}

	.websocket-room {
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-bottom: solid 1px #dddddd;
		margin-bottom: 20px;
	}

	.websocket-msg {
		padding: 40px 0px;
		text-align: center;
		font-size: 14px;
		line-height: 40px;
		color: #666666;
	}

	.websocket-tips {
		padding: 40px 0px;
		text-align: center;
		font-size: 14px;
		line-height: 24px;
		color: #666666;
	}
</style>